import React, { useEffect, useState } from 'react'
import { Card, Descriptions, Button } from 'antd'
import { getHosListDetailRequest } from '@api/hospital/hospitalList'
import { BookingRuleType, getHosListDetailReturnType, hospitalListItemsType } from '@api/hospital/model/hospitalListTypes'
import { useNavigate, useParams, useLocation, Location } from 'react-router-dom'
export default function Hospitalshow() {

    //为了让useLocation可以使用state,我们需要封装一个自定义Hook
    //自定义Hook可以接受一个泛型,这个泛型就是state属性值的类型
    function useMyLocation<T>() {
        type L = Location & { state: T };
        return useLocation() as L;
    }
    //使用自定义Hook拿到路由传值中state的值
    const location = useMyLocation<{ hello: string }>();
    const { hello } = location.state;
    console.log("hello", hello);
    //编程式路由
    const navigate = useNavigate()
    const { id } = useParams()
    //保存医院详情数据
    const [detailList, setDetailList] = useState<getHosListDetailReturnType>({})
    //初始化获取医院详情
    useEffect(() => {
        const getHosListDetail = async () => {
            const re = await getHosListDetailRequest(id as string)
            setDetailList(re)
        }
        getHosListDetail()
    }, [])

    return (
        <Card>
            <Descriptions title="基本信息" bordered column={2}>
                <Descriptions.Item label="医院名称">{(detailList.hospital as hospitalListItemsType)?.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo">{
                    (detailList.hospital as hospitalListItemsType) ?
                        (<img width={200} src={`data:image/jpeg;base64,${(detailList.hospital as hospitalListItemsType)?.logoData}`} alt="" />) :
                        ('')}
                </Descriptions.Item>
                <Descriptions.Item label="医院编码">{(detailList.hospital as hospitalListItemsType)?.hoscode}</Descriptions.Item>
                <Descriptions.Item label="医院地址">{(detailList.hospital as hospitalListItemsType)?.param.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={2}>{(detailList.hospital as hospitalListItemsType)?.route}</Descriptions.Item>
                <Descriptions.Item label="医院简介" span={2}>{(detailList.hospital as hospitalListItemsType)?.intro}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="预约规则信息" bordered column={2} style={{ marginTop: '30px' }}>
                <Descriptions.Item label="预约周期">{(detailList.bookingRule as BookingRuleType)?.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间">{(detailList.bookingRule as BookingRuleType)?.releaseTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间">{(detailList.bookingRule as BookingRuleType)?.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间">{(detailList.bookingRule as BookingRuleType)?.quitTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={2}>{(detailList.bookingRule as BookingRuleType)?.rule}</Descriptions.Item>
            </Descriptions>
            <Button style={{ marginTop: '30px' }} onClick={() => { navigate(-1) }}>返回</Button>
        </Card>
    )
}
